// pages/timeline/timeline.js
Page({
  data: {
    timelineData: [
      {
        id: 1,
        image: '/images/景点-1.jpg',
        avatar: '/images/游客.png',
        name: '山水游客',
        title: '黑麋峰的日出太美了',
        type: 'large'
      },
      {
        id: 2,
        image: '/images/景点-2.jpg',
        avatar: '/images/游客.png',
        name: '自然摄影师',
        title: '云雾缭绕的山峰',
        type: 'small'
      },
      {
        id: 3,
        image: '/images/攻略照片1.jpg',
        avatar: '/images/游客.png',
        name: '旅行达人',
        title: '完美的徒步路线',
        type: 'medium-large'
      },
      {
        id: 4,
        image: '/images/景点-3.jpg',
        avatar: '/images/游客.png',
        name: '风光摄影',
        title: '绿意盎然的森林',
        type: 'small'
      },
      {
        id: 5,
        image: '/images/攻略照片2.jpg',
        avatar: '/images/游客.png',
        name: '户外探险者',
        title: '山间小径的惊喜发现',
        type: 'large'
      },
      {
        id: 6,
        image: '/images/景点-4.jpg',
        avatar: '/images/游客.png',
        name: '自然爱好者',
        title: '静谧的湖水倒影',
        type: 'medium-large'
      },
      {
        id: 7,
        image: '/images/攻略照片3.jpg',
        avatar: '/images/游客.png',
        name: '登山客',
        title: '征服山顶的喜悦',
        type: 'small'
      },
      {
        id: 8,
        image: '/images/攻略照片4.jpg',
        avatar: '/images/游客.png',
        name: '摄影爱好者',
        title: '夕阳西下的温柔',
        type: 'large'
      },
      {
        id: 9,
        image: '/images/攻略照片5.jpg',
        avatar: '/images/游客.png',
        name: '旅游博主',
        title: '山花烂漫的春天',
        type: 'medium'
      },
      {
        id: 10,
        image: '/images/民宿1.jpg',
        avatar: '/images/游客.png',
        name: '民宿体验师',
        title: '温馨的山间民宿',
        type: 'small'
      }
    ],
    leftColumn: [],
    rightColumn: [],
    leftHeight: 0,
    rightHeight: 0,
    navHeight: 132 // 导航栏高度
  },

  onLoad() {
    this.initWaterfallLayout();
  },

  // 初始化瀑布流布局
  initWaterfallLayout() {
    const { timelineData } = this.data;
    let leftColumn = [];
    let rightColumn = [];
    let leftHeight = 0;
    let rightHeight = 0;

    timelineData.forEach(item => {
      // 根据卡片类型设置不同高度
      let cardHeight = 0;
      switch (item.type) {
        case 'large':
          cardHeight = 560; // 480rpx图片 + 80rpx信息区域
          break;
        case 'medium-large':
          cardHeight = 515; // 435rpx图片 + 80rpx信息区域
          break;
        case 'medium':
          cardHeight = 470; // 390rpx图片 + 80rpx信息区域
          break;
        case 'small':
          cardHeight = 380; // 300rpx图片 + 80rpx信息区域
          break;
        default:
          cardHeight = 470;
      }

      // 选择高度较小的列放置卡片
      if (leftHeight <= rightHeight) {
        leftColumn.push(item);
        leftHeight += cardHeight + 20; // 加上间距
      } else {
        rightColumn.push(item);
        rightHeight += cardHeight + 20;
      }
    });

    this.setData({
      leftColumn,
      rightColumn,
      leftHeight,
      rightHeight
    });
  },

  // 点击卡片事件 - 跳转到详情页
  onCardTap(e) {
    const { item } = e.currentTarget.dataset;
    console.log('点击了卡片:', item);
    
    // 跳转到详情页面，传递卡片数据
    wx.navigateTo({
      url: `/pages/card-detail/card-detail?id=${item.id}`,
      success: () => {
        // 将数据存储到全局变量或缓存中
        wx.setStorageSync('cardDetail', item);
      }
    });
  },

  // 下拉刷新
  onPullDownRefresh() {
    // 模拟刷新数据
    setTimeout(() => {
      this.initWaterfallLayout();
      wx.stopPullDownRefresh();
      wx.showToast({
        title: '刷新成功',
        icon: 'success'
      });
    }, 1000);
  },

  // 上拉加载更多
  onReachBottom() {
    wx.showToast({
      title: '加载更多内容...',
      icon: 'loading'
    });
    
    // 模拟加载更多数据
    setTimeout(() => {
      const newData = [
        {
          id: Date.now(),
          image: '/images/民宿2.jpg',
          avatar: '/images/tab-icons/README.md',
          name: '新用户',
          title: '更多精彩内容',
          type: (() => {
            const rand = Math.random();
            if (rand > 0.75) return 'large';
            else if (rand > 0.5) return 'medium-large';
            else if (rand > 0.25) return 'medium';
            else return 'small';
          })()
        }
      ];
      
      const updatedData = [...this.data.timelineData, ...newData];
      this.setData({
        timelineData: updatedData
      }, () => {
        this.initWaterfallLayout();
      });
    }, 1000);
  },

  // 导航栏返回事件
  onNavBackTap() {
    wx.navigateBack({
      fail: () => {
        // 如果没有上一页，则返回首页
        wx.reLaunch({
          url: '/pages/index/index'
        });
      }
    });
  },

  // 导航栏高度变化事件
  onNavHeightChange(e) {
    const { totalHeight } = e.detail;
    this.setData({
      navHeight: totalHeight
    });
  }
});
